<script setup lang="ts">
import { deptTypeAdd, deptTypeUpdate } from "@/api/system/dept";
import { useForm } from "@/hooks/useForm";
import { watch, ref, computed, onMounted, reactive, toRefs } from "vue";
import { notify } from "@/utils/element";
import { SysDeptType } from "@/types/system";

//定义自定义事件
const emit = defineEmits(["refresh"]);

const initData = {};

const state = reactive({
  title: "新增", //新增 || 编辑
  type: "add" as FormType,
  visible: false,
  loading: false,
  formData: {} as SysDeptType,
});

const { title, type, visible, loading, formData } = { ...toRefs(state) };

defineExpose({
  open,
});

function open(type: FormType, title: string, data = {} as any) {
  state.type = type;
  state.title = title;
  //合并初始数据，深度拷贝，不然会影响原数据
  state.formData = JSON.parse(JSON.stringify({ ...initData, ...data }));
  state.visible = true;
}

onMounted(() => {});

const disabled = computed(() => type.value === "edit");

const roleOptions = ref([]);

const formRef = ref();
function submitForm() {
  formRef.value?.validate((valid: boolean) => {
    if (!valid) return;
    //校验通过
    //调用接口，提交数据
    submitData();
  });
}

function close() {
  if (state.loading) return;
  formRef.value?.resetFields();
  state.visible = false;
}

async function submitData() {
  try {
    state.loading = true;
    let res: any = {};
    if (state.type === "edit") {
      res = await deptTypeUpdate(state.formData);
    } else {
      res = await deptTypeAdd(state.formData);
    }
    state.loading = false;
    if (res.code !== 200) return;
    notify("操作成功！", { type: "success" });
    //关闭窗口
    close();
    //触发父组件重新加载数据
    emit("refresh");
  } catch (error) {
  } finally {
    state.loading = false;
  }
}
</script>

<template>
  <el-dialog
    :title="`${title}机构类型`"
    v-model="visible"
    center
    draggable
    :before-close="close"
    width="700px"
    :close-on-click-modal="false"
    destroy-on-close
  >
    <el-form
      v-loading="loading"
      ref="formRef"
      :model="formData"
      label-width="85px"
      label-position="right"
      status-icon
      label-suffix=":"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item
            label="类型名称"
            prop="name"
            :rules="{
              required: true,
              message: '请输入类型名称',
              trigger: 'blur',
            }"
          >
            <el-input
              v-model.trim="formData.name"
              placeholder="请输入类型名称"
              maxlength="30"
              show-word-limit
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24">
                    <el-form-item label="数据标签" prop="dictLabel"  :rules="{required: true,message:'请输入数据标签',trigger:'blur'}">
                        <el-input v-model.trim="formData.dictLabel" placeholder="请输入数据标签" maxlength="30" show-word-limit clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="数据键值" prop="dictValue"  :rules="{required: true,message:'请输入数据键值',trigger:'blur'}">
                        <el-input v-model.trim="formData.dictValue" placeholder="请输入数据键值" maxlength="30" clearable></el-input>
                    </el-form-item>
                </el-col> 
                <el-col :span="24">
                    <el-form-item label="岗位状态" prop="status">
                        <el-radio-group v-model="formData.status">
                            <el-radio value="0" border>正常</el-radio>
                            <el-radio value="1" border>停用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>-->
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="formData.remark"
              type="textarea"
              placeholder="请输入备注信息"
              maxlength="100"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row justify="center" class="mt10">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="submitForm">保存</el-button>
    </el-row>
  </el-dialog>
</template>

<style scoped>
</style>
